<template>
  <el-row type="flex" class="row-bg lt-xl:h-37vh overflow-y-auto">
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>探查结果</p>
        <p v-if="props.tzdata.resultCode === '2'" style="color: green">正常履约</p>
        <p v-else-if="props.tzdata.resultCode === '1'" style="color: red">逾期未还款</p>
        <p v-else style="color: red">无法确认</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>当前履约机构数</p>
        <p style="color: green">{{props.tzdata.currentlyPerformance ? props.tzdata.currentlyPerformance : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>履约笔数</p>
        <p style="color: green">{{props.tzdata.countPerformance ? props.tzdata.countPerformance : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>最大履约金额</p>
        <p style="color: green">{{props.tzdata.maxPerformanceAmt ? props.tzdata.maxPerformanceAmt : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>最近履约时间</p>
        <p style="color: green">{{props.tzdata.latestPerformanceTime ? props.tzdata.latestPerformanceTime : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>当前逾期机构数</p>
        <p style="color: red">{{props.tzdata.currentlyOverdue ? props.tzdata.currentlyOverdue : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>异常还款机构数</p>
        <p style="color: red">{{props.tzdata.accExc ? props.tzdata.accExc : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col">
      <div class="box-back">
        <p>睡眠机构数</p>
        <p style="color: red">{{props.tzdata.accSleep ? props.tzdata.accSleep : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col mb-20px">
      <div class="box-back">
        <p>最大逾期金额</p>
        <p style="color: red">{{props.tzdata.maxOverdueAmt ? props.tzdata.maxOverdueAmt : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col mb-20px">
      <div class="box-back">
        <p>最长逾期天数</p>
        <p style="color: red">{{props.tzdata.maxOverdueDays ? props.tzdata.maxOverdueDays : '-'}}</p>
      </div>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mt-35px box-col mb-20px">
      <div class="box-back">
        <p>最近逾期时间</p>
        <p style="color: red">{{props.tzdata.latestOverdueTime ? props.tzdata.latestOverdueTime : '-'}}</p>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

// 定义 props
const props = defineProps<{
  tzdata: object
  dataId: number
}>()

/** 数据查询-探针C 列表 */
defineOptions({ name: 'DataQueryTanzc' })
</script>

<style scoped>
.box-col{
  display: flex;
  justify-content: space-around;
}
.box-back{
  width: 90%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: white;
  padding: 10px;
  text-align: center;
  max-height: 78px;
  font-size: 16px;
  font-weight: bold;
  font-family: '微软雅黑';
}
.box-back p{
  margin-top: 5px;
}
</style>
